<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/classify.css" />
	</head>
	<body>
		<header id="header">
			<img src="img/back.svg" class="back" id="back">
			<h1 class="mui-title">分类</h1>
			<img src="img/top-chose.png" class="header-right">
		</header>
		<div class="search" id="search">
			<form action="#" id="home-form">
				<img src="img/serach.svg" class="search-img">
				<input type="text" name="" id="" value="" placeholder="户外服装" />
			</form>
		</div>
		<div id="tab" class="flex">
			<ul id="tabul">
				<li title="新品" class="active">新品</li>
				<li title="户外服装">户外服装</li>
				<li title="户外背包">户外背包</li>
				<li title="户外配饰">户外配饰</li>
				<li title="自家露营">自驾露营</li>
				<li title="技术装备">技术装备</li>
				<li title="智能设备">智能设备</li>
			</ul>
			<div id="tab-box">
				<ul id="tab-select" class="flex flex-wrap">

				</ul>
			</div>
		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function tab() {
			app.mockhot('/select', function(res) {
				var responseText = JSON.parse(res);
				var tabul = document.getElementById('tabul');
				var oli = tabul.getElementsByTagName('li');
				var select = document.getElementById('tab-select');

				for (var i = 0; i < responseText.list.length; i++) {
					var seli = document.createElement('li');
					var oimg = document.createElement('img');
					var op = document.createElement('p');
					oimg.src = responseText.list[i].src;
					op.textContent = responseText.list[i].title;
					seli.title = responseText.list[i].value;
					select.appendChild(seli);
					seli.appendChild(oimg);
					seli.appendChild(op);
					if (seli.title == oli[0].title) {
						seli.style.display = 'block';
					}
				}
				var seli = select.getElementsByTagName('li');
				for (var n = 0; n < oli.length; n++) {
					oli[n].index = n;
					oli[n].onclick = function() {
						var _this = this;
						for (var i = 0; i < responseText.list.length; i++) {
							seli[i].style.display = 'none';
							if (seli[i].title == _this.title) {
								seli[i].style.display = 'block';
							}
						}
						for (var n = 0; n < oli.length; n++) {
							oli[n].classList.remove('active')
						}
						_this.classList.add('active');
					}
				}
			})
		}
		tab()
		window.onload = function() {
			document.addEventListener('plusready', function() {
				var back = document.getElementById('back')
				back.addEventListener('touchend', function() {
					plus.webview.open('home.html', 's', {}, 'slide-in-left', 400)
				})
			});
		}
	</script>
</html>
